<template>
  <div>
    <div class="alert alert-secondary" role="alert"
         style="height: 135px;"
         v-for="mf in searchResult" :key="mf.uid">
      <img :src="mf.headurl" @click="goto(mf.uid)" width="100" height="100"
           class="img-thumbnail img-goto"
           alt="MyFollowImg">
      <div style="float:left;margin-left: 30px;margin-top: 3px">
        <el-descriptions class="margin-top" :column="2" :contentStyle="CS" :label-style="LS" border>
          <template slot="extra">
          </template>
          
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            {{ mf.username }}
          </el-descriptions-item>
          
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              邮箱号码
            </template>
            {{ mf.email }}
          </el-descriptions-item>
          
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              擅长的语言
            </template>
            <el-tag size="small" v-for="(item,index) in mf.label" :key="index">{{ item }}</el-tag>
          </el-descriptions-item>
        
        
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script>
import {searchUserByKeyWord} from "@/api/user/user";

export default {
  name: "SearchUserResultList",
  data() {
    return {
      CS: {
        'min-width': '430px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      LS: {
        'font-weight': '800',
        'height': '43px',
        'min-width': '110px',
        'word-break': 'keep-all'
      },
      searchResult: []
    }
  },
  created() {
    let keyWord = this.$route.query.keyWord
    console.log(keyWord)
    if (keyWord === '' || keyWord === undefined) {
      return
    }
    this.initData(keyWord)
  },
  methods: {
    initData(keyWord) {
      searchUserByKeyWord(keyWord).then((res) => {
        if (res.data.code === 200) {
          console.log(res.data.data)
          if (res.data.data.length === 0) {
            console.log("用户名不存在");
          } else {
            this.searchResult = res.data.data
          }
        }
      })
    },
    
    goto(uid) {
      console.log(uid)
      let routeData = this.$router.resolve({
        path: "/user",
        query: {
          uid
        }
      });
      window.open(routeData.href, '_blank');
    }
  }
}
</script>

<style scoped>
.img-goto {
  float: left;
  cursor: pointer;
}
</style>
